<template>
    <div style="width: 100%">
        <div style="width: 1500px; margin: 50px auto 0; text-align: center">
            <span style="display: inline-block; margin-right: 10px;">输入标题</span>
            <el-input
                    type="text"
                    placeholder="请输入文章标题"
                    v-model="text"
                    maxlength="100"
                    show-word-limit
                    style="width: 500px;"
                    class="aaa"
            >
            </el-input>
        </div>
        <div id="editor">
            <mavon-editor style="height: 100%" v-model="textArea"></mavon-editor>
        </div>
        <div style="width: 1500px; text-align: right; margin: 20px auto 50px;">
            <el-button type="primary" @click="submit">提交<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>


<!--        <div style="margin-left: 100px">-->
<!--            <vue-markdown v-highlight>{{msg}}</vue-markdown>-->
<!--        </div>-->
    </div>

</template>

<script>

    import {mavonEditor} from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    import VueMarkdown from 'vue-markdown'

    const marked = require('marked')
    import 'highlight.js/styles/github.css'
    import 'github-markdown-css'
    import axios from 'axios'
    import constant from "../../../utils/constant";
    import {request} from "../../../network/request";
    export default {
        name: "writeBlog",
        data() {
            return {
                text: '',
                textArea: '',
                msg: '```html \n<form method="GET" action="/transferFunds ">\n cash: <input type="text" name="cash"> \n to: <input type=" text " name=“to"> \n<input type="submit" name="action" value=""> \n</form> \n```'
            }
        },
        components: {
            mavonEditor,
            VueMarkdown,

        },
        methods:{
            submit(){
                let date = new Date();

                var userId = parseInt(sessionStorage.getItem('userId'));
                var imgUrl = sessionStorage.getItem('imgUrl');
                var time = date.toLocaleDateString();
                console.log("---------------------")
                console.log(this.text);
                console.log(time);
                console.log(imgUrl);
                console.log(userId);
                console.log(this.textArea);
                // let dataS = {
                //     title: this.text,
                //     userId: userId,
                //     time: time,
                //     text: this.textArea,
                //     imgUrl:imgUrl,
                // };
                // axios.post("http://localhost:83/insertBlog", dataS)
                // .then(res=>{
                //     this.$message({
                //                 message: '登录成功',
                //                type: 'success'
                //           });
                // })
                let tt = this;

                let text = document.getElementsByClassName("v-show-content-html")[0].innerText;
                // console.log(document.getElementsByClassName("v-show-content-html")[0]);
                // console.log(text);
                let myformData = new FormData();
                myformData.append("title", this.text);
                myformData.append("userId", userId);
                myformData.append("time", this.time);
                myformData.append("text", this.textArea);
                myformData.append("imgUrl", imgUrl);
                //http://localhost:83/insertBlog
                //http://www.handsomehuang.cn:83/insertBlog
              //  axios.post('http://localhost:83/insertBlog', {
                request({
                    url: "/insertBlog",
                    method: "post",
                    data: myformData,

                }).then(function (response) {
                  //  alert();
                    tt.$message({
                       message: '提交成功',
                       type: 'success'
                     });
                    setTimeout(function () {
                        location.reload();
                    }, 2000)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });


                // request({
                //   url:"/insertBlog",
                //   method: "post",
                //   params:{
                //
                //   }
                // }).then(res=>{
                //
                //     setTimeout(function () {
                //         location.reload();
                //     }, 2000)
                // }).catch(err=>{
                //   console.log(err);
                // });
            }
        }
    }
</script>

<style scoped>

    #editor {
        width: 80%;
        height: 580px;
        margin: 5rem auto auto;
    }

    .hljs-comment, .hljs-quote {
        color: #7195a8
    }

    .hljs-variable, .hljs-template-variable, .hljs-attribute, .hljs-tag, .hljs-name, .hljs-regexp, .hljs-link, .hljs-name, .hljs-selector-id, .hljs-selector-class {
        color: #d22d72
    }

    .hljs-number, .hljs-meta, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type, .hljs-params {
        color: #935c25
    }

    .hljs-string, .hljs-symbol, .hljs-bullet {
        color: #568c3b
    }

    .hljs-title, .hljs-section {
        color: #257fad
    }

    .hljs-keyword, .hljs-selector-tag {
        color: #6b6bb8
    }

    .hljs {
        display: block;
        overflow-x: auto;
        background: #161b1d;
        color: #7ea2b4;
        padding: 0.5em
    }

    .hljs-emphasis {
        font-style: italic
    }

    .hljs-strong {
        font-weight: bold
    }
</style>